<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>匠心献爱心</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/public.js"></script>
    <script type="text/javascript">
    	document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100 + 'px';
    </script>
    <style>
    	
        .author_info p:first-of-type{
        	font-size: 0.28rem;
        	text-align: center;
        	color: #31343B;
        }
        .author_info p:last-of-type{
        	font-size: 0.16rem;
        	text-align: center;
			color: #5a5d62;
			margin: 0.16rem 0 0.32rem;
        }
        .author_img{
        	width: 1.52rem;
        	height: 1.52rem;
        	border-radius: 50%;
        	margin: 0.32rem auto 0.08rem;
        }
        .author_img img{
        	width: 100%;
        	border-radius: 50%;
        }
        #pro_list ul{
        	width: 3.43rem;
        	margin: 0 auto;
        }
        #pro_list p{
        	font-size: 0.16rem;
        	margin-left: 0.16rem;
        	color: #31343B;
        	margin-bottom: 0.12rem;
        }
        .produce{
        	width: 1.675rem;
        	height: 1.675rem;
        	margin-bottom: 0.075rem;
        	float: left;
        }
        .produce:nth-of-type(2n+2){
        	float: right;
        }
        .produce img{
        	width: 100%;
        	height: 100%;
        }
        .author_info_tit{
        	padding: 0 0.16rem;
        	margin-bottom: 0.27rem;
        }
        
        #author .author_info .store_name{
        	color: #5F3104;
        }
        .placard{
        	width: 100%;
        	display: block;
        }
    </style>
</head>
<body style="min-height: initial!important;">
    
    <div id="author">
    	<div class="author_img">
    		<img :src="author_info.author_photo_url" alt="作者照片"/>
    	</div>
    	<div class="author_info clearfix">
    		<p>{{author_info.author_name}}</p>
    		<p class="store_name" @click = "jump_store_info(author_info.store_id)">所属店铺：{{author_info.store_name}}</p>
    	</div>
    	
    	<div class="author_info_tit">
    		
    		<img :src="author_info.placard" class="placard"/>
    	</div>
    </div>
    <div id="pro_list">
    	<p>点赞支持</p>
    	<ul class="clearfix">
    		<li class="produce" v-for = "item in work_info">
    			<img :src = 'item.production_slideshow["0"].production_img_url' alt="作品图片" @click = "workInfo(this)"/>
    		</li>
    	</ul>
    </div>
    
    
    
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
    	var author_id = GetQueryString('author_id');//作者id
		new Vue({
            el: 'body',
            data: {
                author_info: {},
                work_info: [],
                uid:''
            },
            ready: function () {
                var _self = this;
                $.ajax({
		            url:base_url+"ZITAOHUI/getProductionAuthorDetails",//作者详情的接口
		            data:JSON.stringify({
		            	author_id:author_id
		            }),
		            type:"POST",
		            dataType:"json",
		            contentType: "application/json;charset=UTF-8;",
		            success:function (data){
		            	//console.log(data);
		            	_self.author_info =  data.extend.data;
		            },
		            error:function (error){
		            	alert('网络错误，请重试');
		            }
		        })
                $.ajax({
		            url:base_url+"ZITAOHUI/getProductionList",//获取属于作者的产品的接口
		            data:JSON.stringify({
		            	author_id:author_id
		            }),
		            type:"POST",
		            dataType:"json",
		            contentType: "application/json;charset=UTF-8;",
		            success:function (data){
		            	_self.work_info =  data.extend.list;
		            },
		            error:function (error){
		            	alert('网络错误，请重试');
		            }
		        })
            },
            methods: {
                refresh_data: function () {
                    var _self = this;
				},
				workInfo: function (t){
					window.location.href = "../page/my_woke_info.html?production_id="+t.item.production_slideshow["0"].production_id;//跳转到作品详情
				},
                join_info: function (t) {
                    //console.log(t)
                    //window.location.href = '../page/Sunbird-details-page.html?sharBioid=' + t.item.id;
                },
                jump_store_info : function(store_id){//跳转到店铺的详情
                	window.location.href = '../page/Shop.html?s_id='+store_id;
                },
                add_good: function (t) {
                    console.log(t);
                    $.ajax({
                        url: base_url + 'ZITAOHUI/increaseShareBioGoodsNum',
                        data: {
                            sharBioid: t.item.id,
                            user_id: sessionStorage.getItem("uid")
                                },
                        success: function (data) {
                            console.log(data)
                            if (data.extend.list.msg == '点赞成功') {
                                t.item.good_num += 1;
                            } else {
                                alert(data.extend.list.msg)
                            }

                        }
                    })
                },
                delete: function (t, idx) {
                    console.log(t)
                    this.user_info.splice(idx, 1);
                    $.ajax({
                        url: base_url + 'ZITAOHUI/deleteShareBio',
                        data: {
                            sharBioid: t.item.id
                        },
                        success: function (data) {
                            console.log(data);
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>